<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
    <title>太极-公转自转系统（Orbital rotation）</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
</head>
 <body onload="$ORT.draw();">
   <div id="record" style="">
  </div>
     <script type="text/javascript">
	    var $ORT = orbitalRotation = {
			canvasWidth:300,
			canvasHeight:300,
			sunRotationCounter:1,
			taichiCount:5,
			init:function(){
				var canvas = $ORT.canvas = document.createElement("canvas");
				canvas.setAttribute('id', 'orbitalRotationCanvas');
				canvas.setAttribute('style', 'background-color:red;margin:100px;');
				document.body.appendChild(canvas);
				if(canvas.getContext){
					canvas.setAttribute('width', $ORT.canvasWidth);
					canvas.setAttribute('height', $ORT.canvasHeight);
					$ORT.ctx = canvas.getContext("2d");
					return true;
				} else {
					alert("not surport canvas");
					return false;
				}
			}
		};
		$ORT.sunRadius = ($ORT.canvasHeight*0.75-($ORT.taichiCount-1)*5)/(
			1
				+
			2
				*
			(
				(1- Math.pow(0.6, $ORT.taichiCount-1))
					/
				(
					1-0.6
				)
			)
		);
		$ORT.draw = function(){
			if(this.init()){
				this._animateTaichi();
			}
		}
		$ORT._animateTaichi = function(){
			setInterval($ORT._rotateTaichi, 20);
		}
		$ORT._rotateTaichi = function (){
			$ORT.ctx.clearRect(-$ORT.canvasWidth/2, -$ORT.canvasHeight/2, $ORT.canvasWidth*2, $ORT.canvasHeight*2);
			$ORT._taichi($ORT.ctx);
		}
		$ORT._drawArc = function (ctx,fillStyle, x,y,radius , startA, endA, isAntiClock){
			ctx.beginPath();
			ctx.arc(x,y,radius ,startA,endA, isAntiClock);
			ctx.fillStyle=fillStyle;
			ctx.closePath();
			ctx.fill();
		}
		$ORT._drawTaichi = function (ctx, cfg){
			var centerX = cfg.centerX;
			var centerY = cfg.centerY;
			var radius = cfg.radius;
			var arc = cfg.arc;
			if(arc){
				ctx.translate(centerX, centerY);
				ctx.rotate(arc);
				ctx.translate(-centerX, -centerY);
			}
			var grdWhite=ctx.createLinearGradient($ORT.canvasWidth,$ORT.canvasHeight,0,0);
			grdWhite.addColorStop(0,"rgba(255,255,255,1)");
			grdWhite.addColorStop(1,"rgba(200,200,200, 1)");
			var grdBlack=ctx.createLinearGradient(0,0,$ORT.canvasWidth,$ORT.canvasHeight);
			grdBlack.addColorStop(0,"rgba(0,0,0,1)");
			grdBlack.addColorStop(1,"rgba(200,200,200, 1)");
			grdBlack = "black";
			grdWhite = "white";
			$ORT._drawArc(ctx, grdWhite, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, true);
			$ORT._drawArc(ctx, grdBlack, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, false);
			$ORT._drawArc(ctx, grdWhite, centerX,centerY - radius/2, radius/2,  		0*Math.PI,2*Math.PI, false);
			$ORT._drawArc(ctx, grdBlack, centerX,centerY + radius/2, radius/2,  		0*Math.PI,2*Math.PI, true);
			$ORT._drawArc(ctx, grdWhite, centerX,centerY+radius/2,   radius/16,       0*Math.PI, 2*Math.PI, true);
			$ORT._drawArc(ctx, grdBlack, centerX,centerY-radius/2,   radius/16,       0*Math.PI, 2*Math.PI, false);
		}
		$ORT._taichi = function (ctx){
			var radius  = $ORT.sunRadius;
			var cfg = {
				satelliteArc:Math.PI/180*$ORT.sunRotationCounter,
				arc:Math.PI/180*$ORT.sunRotationCounter,
				radius:radius,
				centerX:$ORT.canvasWidth/2,
				centerY:$ORT.canvasHeight/2
			};	
			
			$ORT._sunHalo(ctx, cfg);	
			ctx.save();			
			$ORT._drawTaichi(ctx, cfg);
			ctx.restore();
			var parentCfg = cfg;
			var x,y;
			for(var i = 1; i < $ORT.taichiCount-1; i++){
				 parentCfg = $ORT._satelliteTaichi(ctx, parentCfg, i);				
			}
			$ORT.sunRotationCounter++;
		}
		$ORT._satelliteTaichi = function (ctx, parentCfg, i){
			var revolutionArc;
			ctx.save();
			cfg = {};
			cfg.arc = Math.PI/180*i*$ORT.sunRotationCounter;
			revolutionArc = parentCfg.satelliteArc + parentCfg.arc;
			cfg.satelliteArc = revolutionArc;
			cfg.radius = parentCfg.radius*0.6;
			x = parentCfg.centerX + (parentCfg.radius + cfg.radius+5)*Math.cos(revolutionArc);
			y = parentCfg.centerY + (parentCfg.radius + cfg.radius + 5)*Math.sin(revolutionArc);
			cfg.centerX = x;
			cfg.centerY = y;
			$ORT._drawTaichi(ctx, cfg);
			ctx.restore();
			return cfg;
		}
		$ORT._sunHalo = function (ctx, cfg){
			ctx.beginPath();
			var gt = ctx.createLinearGradient(-$ORT.canvasWidth/2, -$ORT.canvasWidth/2, $ORT.canvasWidth*2, $ORT.canvasHeight*2);
			gt.addColorStop(0, 'rgba(255,255,255,1)');
			gt.addColorStop(0.40, 'rgba(222,232,250,1)');
			gt.addColorStop(0.60, 'rgba(8,27,48,1)');
			gt.addColorStop(1, 'rgba(0,0,0,1)');
			ctx.fillStyle= gt;
			ctx.fillRect(-$ORT.canvasWidth/2, -$ORT.canvasWidth/2, $ORT.canvasWidth*2, $ORT.canvasHeight*2);
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(cfg.centerX,cfg.centerY, cfg.radius*2,0*Math.PI,2*Math.PI, true);
			gt = ctx.createRadialGradient(cfg.centerX,cfg.centerY, cfg.radius, cfg.centerX,cfg.centerY, cfg.radius*1.5);
			gt.addColorStop(0, 'rgba(222,232,250,1)');
			gt.addColorStop(0.5,'rgba(125,186,240,1)');
			gt.addColorStop(0.6,'rgba(71,142,204,1)');
			gt.addColorStop(1, 'rgba(4,80,145,1)');
			ctx.fillStyle=gt;
			ctx.fill();
			ctx.closePath();	
		}
		var imageCount = 0;
		var a;
		function t(){
			imageCount++;
		    if(imageCount>=2){
				return;
			}

			var img = new Image();
			var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
		a = document.createElement('a');
						a.download = 'orbitalRotationCanvas'+imageCount+".png";
						a.href = orbitalRotationCanvas.toDataURL("image/png");
						a.textContent = 'Click here to download!';
						a.dataset.downloadurl = ['png', a.download, a.href].join(':');
			img.onload=function(){

						
			};
			img.src = a.href;
			
			record.appendChild(img);

			setTimeout(t, 500);
		}
	</script>
 </body>
</html>